/* 
1 打开页面的时候 看到学员信息数据
  1 定义一个函数  发送请求获取数据 渲染页面 

2 新增学员
  1 点击  “新增” 按钮 弹出模态框 - 显示新增 表单   已经实现 
  2 初始化 新增表单中 下拉列表 （省市县）
      1 新增表单中  籍贯 下拉列表  
        1 重新去熟悉  select 标签
        2 考虑结合业务 实现 
        3 发送请求 获取 城市相关数据 来渲染 下拉列表 
      2 需要给 省 下拉列表 绑定 change 事件 
        1 事件触发  获取选中的 “省” 拼接成参数 发送给后端 来获取对应 市 
          后端响应对应  市 数据了，显示在 新增表单中  市 下拉列表中 
      3 需要给 市 下拉列表 绑定 change事件 
        1 事件触发了 获取选中的 市 拼接成参数 发送给后端 来获取对应的 县 
          后端响应对应 县 数据了， 显示在 新增表单中  县  下拉列表 
  3 给新增表单  绑定 提交事件
    1 阻止默认行为
    2 快速获取新增表单中的值
    3 拼接成参数发送给后端 完成新增
    4 成功 
      1 提示用户 新增成功
      2 重置新增表单
      3 关闭模态框
      4 发送请求获取最新的数据 

3 编辑学员
  1 给 编辑 按钮绑定点击事件  
    1 弹出编辑-模态框 
  2 让待编辑的数据  显示在 模态框中 
  2 先设置一下 下拉列表 也能正常使用  先实现！！  
 */



// 获取元素
const tbody = document.querySelector('tbody');

const addForm = document.querySelector('#addModal form');

const updateForm = document.querySelector('#updateModal form');


// 发送请求  获取数据渲染页面
function getStudentList() {
  axios.get("/student/list").then(result => {
    if (result.data.code === 0) {
      const list = result.data.data
      // console.table(list)
      const html = list.reduce((h, v) => {
        return h + `
                <tr>
        <th scope="row">${v.id}</th>
        <td>${v.name}</td>
        <td>${v.age}</td>
        <td>${v.sex}</td>
        <td>${v.group}</td>
        <td>${v.phone}</td>
        <td>${v.salary}</td>
        <td>${v.truesalary}</td>
        <td>${v.province + v.city + v.county}</td>
        <td>
          <button type="button" data-id="${v.id}" class="btn btn-primary btn-sm update-show-modal">修改</button>
          <button type="button" data-id="${v.id}" class="btn btn-danger btn-sm delete-btn">删除</button>
        </td>
      </tr> `}, "")

      tbody.innerHTML = html
    }
  })

}
// 封装部分
// 发送请求 获取数据 显示到对应的下拉列表中
// URL 接口地址
// params 接口的参数
// dom 目标下拉列表
// lable 下拉列表默认显示的文本
function renderSelect(url, params, dom, label, value = '') {
  axios.get(url, { params })
    .then((result) => {
      dom.innerHTML = result.data.reduce((h, v) =>
        h + `
                <option value="${v}">${v}</option>`,
        `<option value="">--${label}--</option>`
      )
      // 设置 select标签 选中某个值
      dom.value = value;
    })
}
// 初始化 新增表单 中 下拉列表
function initSelect(selector) {
  // 发送请求获取城市的数据 来渲染下拉列表 会导致 出现 处理
  // 原因可能是 普通数据 返回的格式 和 城市列表  返回的数据格式不一样
  // 让后端去调整 返回的数据结构 必须一致
  const provinceSelect = document.querySelector(`${selector} [name=province]`)
  const citySelect = document.querySelector(`${selector} [name=city]`)
  const countySelect = document.querySelector(`${selector} [name=county]`)
  // 获取省份的数据 显示出来
  renderSelect("/geo/province", {}, provinceSelect, "省")

  // 新增中 省 change事件
  provinceSelect.addEventListener('change', function (e) {
    // 根据省来获取市
    renderSelect("/geo/city", { pname: provinceSelect.value }, citySelect, "市")
  })

  // 新增中 市 change事件
  citySelect.addEventListener('change', function (e) {
    // 根据市来获取县
    renderSelect("/geo/county", { pname: provinceSelect.value, cname: citySelect.value, }, countySelect, "县")
  })
}

// 发送请求  获取数据渲染页面
getStudentList();

// 初始化 新增表单 中 下拉列表
initSelect("#addModal")

// 初始化 编辑表单 中 下拉列表
initSelect("#updateModal")

// 绑定 新增表单 提交事件
addForm.addEventListener('submit', function (e) {
  // 阻止默认行为
  e.preventDefault()
  // 获取form表单的数据
  const data = $(addForm).serialize()
  // 发送请求
  axios.post("/student/add", data).then((result) => {
    // 判断 是否是请求成功的状态
    if (result.data.code === 0) {
      // 友情提示
      toastr.success(result.data.message)
      // 重置表单
      addForm.reset()
      // 隐藏模态框
      $("#addModal").modal("hide")
      // 获取最新的数据
      getStudentList();
    }
  })
})

//编辑按钮  给tbody绑定事件  事件委托  编辑  点击
// 删除按钮也在这里   事件委托
tbody.addEventListener('click', function (e) {
  const dom = e.target
  // console.log(dom);
  if (dom.classList.contains("update-show-modal")) {
    // 弹出模态框  编辑
    $("#updateModal").modal("show")

    // 获取被编辑的数据id
    const id = dom.dataset.id

    // 根据id 来发送请求 获取对应的数据
    axios.get("/student/one", { params: { id } }).then((result) => {
      // 获取对象
      const obj = result.data.data
      // 大功能  把对象的数据显示在form表单中 start
      for (const key in obj) {
        //  根据key去查找对应的dom元素
        const target = document.querySelector(`#updateModal [name=${key}]`);

        // 性别 单选框 特殊！
        if (key === "sex") {
          // 根据当前的性别的值 (bj.sex)找到对应的性别 单选框  让它选中
          // 纪要找到 name=sex 而且 value=obj.sex 标签
          document.querySelector(`#updateModal [name=sex][value=${obj.sex}]`).checked = true;
          // 跳过下面的代码
          continue
        }

        // 找到了这个dom元素 我们菜可以设置 给普通的表单元素使用
        if (target) {
          target.value = obj[key]
        }
      }

      // 根据省信息 来获取市 显示处理 异步！！
      renderSelect("/geo/city",
        { pname: obj.province },
        document.querySelector('#updateModal [name=city]'),
        "市",
        obj.city
      );
      // 根据市信息 来获取县 默认选中！！
      renderSelect("/geo/county",
        { pname: obj.province, cname: obj.city },
        document.querySelector('#updateModal [name=county]'),
        "县",
        obj.county
      );
    })
  } else if (dom.classList.contains("delete-btn")) {
    if (confirm("您确定要删除此数据吗")) {
      // 拿id
      const id = dom.dataset.id
      // 发送请求
      axios.delete("/student/delete", { params: { id } }).then((result) => {
        if (result.data.code === 0) {
          // 友情提示
          toastr.success(result.data.message)
          // 获取最新的数据
          getStudentList();
        }
      })
    }
  }
})

// 绑定 编辑表单 提交事件
updateForm.addEventListener('submit', function (e) {
  // 阻止默认行为
  e.preventDefault()
  // 获取form表单的数据
  const data = $(updateForm).serialize()
  // 发送请求
  axios.put("/student/update", data).then((result) => {
    // 判断 是否是请求成功的状态
    if (result.data.code === 0) {
      // 友情提示
      toastr.success(result.data.message)
      // 重置表单
      updateForm.reset()
      // 隐藏模态框
      $("#updateModal").modal("hide")
      // 获取最新的数据
      getStudentList();
    }
  })
})